<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>商品列表</title>
	<link rel="stylesheet" href="./css/swiper-bundle.css" />
	<link rel="stylesheet" href="./css/index.css" />
	<style>
		.swiper {
			width: 700px;
			height: 300px;
			--swiper-pagination-color: #00ff33;

			--swiper-navigation-color: blue;
			/* 单独设置按钮颜色 */
			--swiper-navigation-size: 20px;
			/* 设置按钮大小 */
		}

		.swiper .swiper-button-hidden {
			opacity: 0;
		}

		.swiper .swiper-wrapper img {
			width: 700px;
			height: 300px;

		}
		/* container0 */
		.container0{
			display: flex;
		}
		/* 轮播图2 */
		.swiper {
			width: 900px;
			height: 300px;
			--swiper-pagination-color: #00ff33;

			--swiper-navigation-color: blue;
			/* 单独设置按钮颜色 */
			--swiper-navigation-size: 20px;
			/* 设置按钮大小 */
		}
		#swiper2 .swiper-slide img{
            width: 100%;
            height: 100%;
        }
		/* 倒计时区 */
		.daojiTime {
			margin-top: 150px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
		}

		.daojiTime p{
			position: relative;
			top: -140px;
			background: linear-gradient(to top,rgb(235, 179, 179) ,yellow);
			color: brown;
		}

		.big {
			height: 300px;
			width: 200px;
			background: linear-gradient(to top,rgb(235, 179, 179) ,yellow,white);
			text-align: center;
			margin: 0 auto;
		}
		.big img{
			width: 200px;
		}
		/* 多级导航 */
		.leftList{
			position: relative;
		}
		.leftList .rightNav{
			width: 300px;
			height: 450px;
			position: absolute;
			left: 210px;
			top: 0;
			z-index: 999;
			background: rgb(255, 192, 203,0.5);
			display: block;
		}
		.leftList .rightNav div{
			padding: 18px;
		}

		/* 搜索区 */
		.search{
			position: relative;
		}
		.search input{
			padding-left: 50px;
			box-sizing: border-box;
			font-size: 20px;
		}
		.search img{
			position: absolute;
			top: 35px;
			left: 15px;
			width: 20px;
		}
		.search button{
			position: absolute;
			right: 10px;
			top: 24px;
			border-radius: 20px;
			background: rgb(255, 227, 80);
		}
	</style>
	<!-- 
        前端开发
           1. 静态页面
           2. 获取后端数据
           3. 动态渲染
     -->
</head>

<body>
	<div class="header banHeart">
		<div class="logo">
			<img src="http://test.yuguoxy.com/static/img/index-logo.png" alt="">
			<span>熊猫优选</span>
		</div>
		<div class="search">
			<img src="https://img1.baidu.com/it/u=1891381588,886573663&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=496" alt="pic1">
			<input type="text" placeholder="搜索商品发现更多实惠">
			<button class="sBtn">搜索</button>
		</div>
		<div class="nav">
			<span><img src="http://test.yuguoxy.com/static/img/parcel.png" alt=""><br>全场包邮</span>
			<span><img src="http://test.yuguoxy.com/static/img/returnGoods.png" alt=""><br>7天退换</span>
			<span><img src="http://test.yuguoxy.com/static/img/ensure.png" alt=""><br>品质保证</span>
		</div>
		<div class="wraper">
			<button class="sign">注册</button>
			<button class="login">登录</button>
		</div>
		<!-- <div class="logo">
            <img src="https://img2.baidu.com/it/u=2988965001,590057112&fm=253&fmt=auto&app=138&f=JPEG" alt="">
            <p>昵称:周sir</p>
        </div> -->
	</div>
	<!-- 导航区域 -->
	<div id="nav">
		<ul>
			<li class="chosed">首页</li>
			<li>9块9包邮</li>
			<li>超值大额卷</li>
			<li>降温急救穿搭</li>
		</ul>
	</div>
	<!-- 主板区域 -->
	<div class="banner">
		<div class="leftList">
			<ul>
				<li>女装/女鞋</li>
				<li>男装/男鞋</li>
				<li>美妆/个护</li>
				<li>配饰/箱包</li>
				<li>零食王国</li>
				<li>母婴用品</li>
				<li>手机/数码</li>
				<li>内衣袜子</li>
				<li>文娱/家具</li>
			</ul>
			<div class="rightNav">
				<div>女装/女鞋 男装/男鞋</div>
				<div>---------------------------------</div>
				<div>美妆/个护 配饰/箱包</div>
				<div>---------------------------------</div>
				<div>零食王国 手机/数码</div>
				<div>---------------------------------</div>
				<div>内衣袜子 文娱/家具</div>
				<div>---------------------------------</div>
			</div>
		</div>
		<div class="rightArea">
			<!-- 轮播区域 -->
			<div class="banner-wrapper">
				<div class="swiper" id="swiper1">
					<div class="swiper-wrapper">
						<!-- <div class="swiper-slide" style="background-color: skyblue">Slide 1</div>
						<div class="swiper-slide" style="background-color: pink">Slide 2</div>
						<div class="swiper-slide" style="background-color: goldenrod">Slide 3</div> -->
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>

					<!-- 如果需要导航按钮 -->
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
				</div>
				<div class="rightTop">
					<p>9块9包邮</p><span>保你不吃亏 ·</span><img width="150px"
						src="http://img1.lukou.com/static/coupon/p/image_link/Q34r2F1uSePMh64rnVsuidyw1Q7gWi0W.gif"
						alt="">
				</div>
			</div>
			<div class="rightBot">
				<div class="rb1">
					<p>降温急救穿搭<br>速来抢购~</p><span>Go</span><img width="120px"
						src="http://img1.lukou.com/static/coupon/p/image_link/wpyCxJo1GSvfq8vvG1n6GtFRAo37zZ2j.png"
						alt="">
				</div>
				<div class="rb2">
					<p>超值大额券<br>优惠直击底价</p><span>Go</span><img width="120px"
						src="http://img1.lukou.com/static/p/commodity/img/20181212-235507.png" alt="">
				</div>
				<div class="rb3">
					<p>扫码下载APP<br>发现更多惊喜</p><img width="100px"
						src="http://test.yuguoxy.com/static/img/%E4%BA%8C%E7%BB%B4%E7%A0%81.png" alt="">
				</div>
			</div>
		</div>
	</div>
	<div class="buzhidao">小编精选 每天更新</div>
	<div class="container0">
		<div class="big">
			<img width="100px" src="https://img2.baidu.com/it/u=2026294414,2668870386&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
			<li>12点场</li>
			<span>距离结束还有</span>
			<div class="daojiTime">
				<p></p>
			</div>
		</div>

		<div class="swiper" id="swiper2">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img width="100px" src="https://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000673521926_1_800x800.jpg" alt=""></div>
				<div class="swiper-slide"><img width="100px" src="https://image4.suning.cn/uimg/b2c/newcatentries/0070159735-000000000611452816_1_800x800.jpg" alt=""></div>
				<div class="swiper-slide"><img width="100px" src="https://image5.suning.cn/uimg/b2c/newcatentries/0070069845-000000000177536955_2_800x800.jpg" alt=""></div>
			</div>
			<!-- 如果需要分页器 -->
			<!-- <div class="swiper-pagination"></div> -->
	
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
	
			<!-- 如果需要滚动条 -->
			<!-- <div class="swiper-scrollbar"></div> -->
		</div>
	</div>
	<div class="container">
		<div class="product">
			<!-- 动态渲染 -->
		</div>
	</div>
	<div class="more">
		<button>加载更多</button>
	</div>

	<!-- 登录 -->
	<div class="login_wraper">
		<p class="close">x</p>
		<form>
			<input type="text" placeholder="请输入用户名" name="username" /><br />
			<input type="password" placeholder="请输入密码" name="password" /><br />
			<input type="submit" value="登录" />
		</form>
	</div>


	<!-- 右侧功能区 -->
	<div class="right-fixed">
		<div class="fiex-1">⬆<br>顶部</div>
		<div class="fiex-2">特色优选</div>
		<div class="fiex-3">优惠卷</div>
		<div class="fiex-4">浏览商品</div>
		<div class="fiex-5">底部<br>⬇</div>
	</div>

	<!-- 底部 -->
	<footer id="footer">
		<div class="foot_inner container">
			<ul>
				<h3>熊猫优选</h3>
				<li>年轻人网购首选 购物领卷更省钱</li>
				<li>全程包邮 七天退换 品质保证</li>

			</ul>
			<ul>
				<h3>合作伙伴</h3>
				<div class="spanbox">
					<span>千峰教育</span>
					<span>web前端</span>
					<span>JavaScript</span>
					<span>Promise</span>
					<span>ajax</span>
					<span>Node.js</span>
					<span>Mongodb</span>
				</div>
			</ul>
			<ul>
				<h3>下载我们</h3>
				<li><img style="width: 100px; vertical-align: middle;"
						src="http://test.yuguoxy.com/static/img/%E4%BA%8C%E7%BB%B4%E7%A0%81.png" alt="">&nbsp;&nbsp;
					手机下载app</li>
				<li>扫码下载APP 发现更多惊喜</li>
			</ul>
		</div>
	</footer>

	<!-- 版权 -->
	<section id="copyright">
		<div class="copyright_inner">Copyright @ Ghost中文网 │ 京ICP备11008151号 │京公网安备11010802014853
		</div>
	</section>

	<!-- 倒计时js -->
	<script>
		function daojiTime(a, b) {
			var time1 = new Date()
			var time2 = new Date(a)
			var time = time2.getTime() - time1.getTime() // 总的毫秒差 = 天的毫秒差

			// 换算-天  相差的总毫秒/ 1天的毫秒 = 相差的天数
			var day = time / (1000 * 60 * 60 * 24)
			day = Math.floor(day)
			if (day < 10) day = "0" + day // 判断是否个位数 是则前面加个0  07：04：46：55

			var hoursTime = time - day * (1000 * 60 * 60 * 24)
			var hours = hoursTime / (1000 * 60 * 60)
			hours = Math.floor(hours)
			if (hours < 10) hours = "0" + hours

			var minutesTime = hoursTime - hours * (1000 * 60 * 60)
			var minutes = minutesTime / (1000 * 60)
			minutes = Math.floor(minutes)
			if (minutes < 10) minutes = "0" + minutes

			var secondsTime = minutesTime - minutes * (1000 * 60)
			var seconds = secondsTime / (1000)
			seconds = Math.floor(seconds)
			if (seconds < 10) seconds = "0" + seconds

			var str = `<span>${hours}</span> : <span>${minutes}</span> : <span>${seconds}</span> `

			if (day == "00" && hours == "00" && minutes == "00" && seconds == "00" || !seconds) {
				clearInterval(sTime)
				return `${b} 已结束`
			}
			return str
		}

		function pValue() {
			let p1 = document.querySelector(".daojiTime>p")
			let sTime = setInterval(function () {
				p1.innerHTML = daojiTime(`2022-10-9 20:25:30`, `今日抢购`)
			}, 500)
		}
		pValue()
	</script>
	<script src="./lib/swiper-bundle.js"></script>
	<script src="./lib/js.cookie.js"></script>
	<script src="./lib/axios.min.js"></script>
	<script src="./js/request.js"></script>
	<script src="./api/user.js"></script>
	<script src="./api/goods.js"></script>
	<script src="./js/index.js"></script>
	<script src="./js/banner.js"></script>
</body>

</html>